<template>
        <li>
          <label>
            <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)" />
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input ref="inputTitle" v-show="todo.isEdit" type="text" :value="todo.title" @blur="handleBlur(todo,$event)">
          </label>
          <button class="btn btn-danger" @click="deleteList(todo.id)">删除</button>
          <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">修改</button>
        </li>
</template>

<script>
    export default {
        name:'MyItem',
        props:['todo'],
        methods: {
          handleCheck(id){
            this.$store.commit('listAbout/HandleCheck',id)
          },
          deleteList(id){
            this.$store.commit('listAbout/DeleteList',id)
          },
          handleEdit(todo){
            if (todo.hasOwnProperty('isEdit')) {
               todo.isEdit = true
            }else{
            this.$set(todo,'isEdit',true)
            }
            this.$nextTick(function(){
              this.$refs.inputTitle.focus()
            })
          },
          handleBlur(todo,e){
            todo.isEdit = false
            todo.title = e.target.value
            // console.log(todo);
          }
        },
    }
</script>

<style scoped>

  /*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  /* border-top: 1px solid #ddd; */
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
  /* margin-right: 3px; */
  /* background-color: #f3d5ad; */
}

.btn-edit{
  color: #fff;
  background-color: skyblue;
  border: 1px solid rgb(103,159,180);
  margin-right: 5px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover{
  background-color: #ddd;
}

li:hover button{
  display: block;
}

</style>